<extend name='Layout::index'/>
<block name="title">
    <title>设计师</title>
</block>
<block name="content">
    <div class="yd-img-box">
        <div class="sjs">
            <div class="sjs1">
                <div class="sjs2">
                    <div class="sjs3">为您智能匹配设计师</div>
                    <div class="sjs4">
                        <div class="sjs5"> <input style="outline:none" name="input2" type="text" size="23" placeholder="上海" onfocus="this.value=''" class="zxbj9" disabled/></div>
                        <div  ><select class="sjs6 js-area_id"  name="area_id">
                            <foreach name="arrArea" item="val">
                            <option value="{$val['id']}">{$val['name']}</option>
                            </foreach>
                            </select>
                        </div>
                        <div class="sjs5"> <input style="outline:none" name="plot" type="text" size="23" placeholder="请输入小区名称" onfocus="this.value=''" class="zxbj9 js-plot"/></div>

                        <div class="sjs5"> <input style="outline:none" name="place" type="text" size="23" placeholder="请输入您的房屋面积"  maxlength="7" onfocus="this.value=''" class="zxbj9 js-place"/></div>
                        <div  >
                            <select class="sjs6 js-style_id"  name="style_id">
                            <foreach name="arrStyle" item="val" >
                                <option value="{$val['id']}">{$val['name']}</option>
                            </foreach>
                        </select>
                        </div>
                        <div class="sjs5"> <input style="outline:none" name="butget" type="text" size="23" placeholder="请输入您的预算(万元)" onfocus="this.value=''" class="zxbj9 js-butget"/></div>
                        <div > <textarea name=" " cols="" rows="6" class="sjs7 js-remark" placeholder="您可以具体描述对家装的需求，以便我们能更好的为您提供服务"></textarea></div>


                    </div>
                    <div class="sjs8"><a class="js-match"><img src="__PUBLIC__/home/img/sjs_an.gif" width="240" height="29"></a></div>


                </div>
            </div>
        </div>

    </div>
    <div class="yd1">
        <div class="dq_bj">
            <div class="dq">当前位置：<a href="#">沪佳工厂店</a> > <a href="#">预约到店</a> > 门店展示</div>
        </div>
        <div class="sjs9">
            <ul>
                <foreach  name="arrDesigner" item="val">
                <li><div class="sjs9_img"><a href="#"><img src="__PUBLIC__/upload/{$val['pic']}" width="230" height="230"></a></div>
                    <div class="sjs9_name">{$val['name']}</div>
                    <div class="sjs9_text"><table width="263" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="69" height="30" align="center" valign="top">擅长风格：</td>
                            <td width="194" valign="top">{$val['style_id']}</td>
                        </tr>
                        <tr>
                            <td align="center" valign="top">设计理念：</td>
                            <td valign="top">{$val['idea']}</td>
                        </tr>
                    </table>
                    </div>
                    <button type="button" data-toggle="modal"
                            data-target="#myModal<?php echo $val['id'] ?>" class="btn btn-primary btn-lg"  style=" border:none; outline: none; ">
<span style="background:#f5f5f5; padding:0 0 0 160px; float:right"> <img src="__PUBLIC__/home/img/sjs9_an.gif" width="90" height="26"></span>

                    </button>
                </li>
                    <div class="modal fade" id="myModal{$val['id']}" >
                        <div class="modal-dialog" style="width:738px; margin:50px auto">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"> </span></button>
                                </div>
                                <div class="modal-body">
                                    <!-- 内容 -->
                                    <div class="mtk_text">在线预约设计师</div>
                                    <div class="mtk_k">
                                        <span style="float:left; font-size:16px; line-height:32px; padding-right:10px">姓名</span><div class="mtk_k2"> <input style="outline:none"name="input2" type="text" size="35" placeholder="请输入您的姓名" onfocus="this.value=''" class="mtk_k3 js-name{$val['id']}"/></div></div>
                                    <div class="mtk_k4">
                                        <span style="float:left; font-size:16px; line-height:32px; padding-right:10px">手机号码</span><div class="mtk_k2"> <input style="outline:none"name="input2" type="text" size="35" placeholder="请输入您的手机号码" onfocus="this.value=''" class="mtk_k3 js-mobile{$val['id']}"/></div></div>

                                </div>
                                <div class="modal-footer">
                                    <div class="mtk8"> 该设计师已帮助<span style="color:#F00; font-weight:bold"> 54485</span> 位业主</div>
                                    <button  onclick="func({$val['id']})"  style=" border:none; background-color:#FFF" > <a href="#"><img src="__PUBLIC__/home/img/sjs.gif" width="124" height="34"></a></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </foreach>
            </ul>
            <script>
            function func(e){
                var jsn='js-name'+e;
                var jsm='js-mobile'+e;

                var name =$('.'+jsn).val();
                var mobile = $('.'+jsm).val();
                var id= e ;
                if(name == '' || name == '请输入您的姓名'){
                    alert('用户名不能为空');
                    return false;
                }

                var phone = /^1[3|4|5|8|7][0-9]\d{8}$/;
                if (mobile.length = 0) {
                    alert('号码不能为空');
                    return false;
                }
                if (!phone.test(mobile)) {
                    alert('号码有误！');
                    return false;
                }
                function Trim(str) {
                    return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');
                }

                $.ajax({
                    type: "POST",
                    url: "{:U('Designer/order')}",
                    data: {
                        status:id,
                        name: name,
                        mobile: mobile
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data == 1) {
                            $('#'+'myModal'+a).hide();
                            $('#myModal1').modal('toggle');
                        } else if (data == 3) {
                            alert('您已报名');
                        } else if (data == 2) {
                            alert('报名失败，请重新报名');
                        }
                    }
                })

            }
            </script>
            <div class="paging_1">
                <div class="paging_2">
                   {$page}
                </div>
            </div>

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:550px; margin:50px auto">
            <div class="modal-content1">
                <div class="modal-header1">
                    <button type="button" class="close1" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"> </span></button>
                </div>

                <div class="modal-body">
                    <!-- 内容 -->
                </div>
            </div>
        </div>
    </div>





    <script>
        $('.js-match').click(function(){
            var butget=$('.js-butget').val();
            var area_id=$('.js-area_id').val();
            var plot=$('.js-plot').val();
            var place=$('.js-place').val();
            var style_id=$('.js-style_id').val();
            var remark=$('.js-remark').val();
            if( plot =='请输入小区名称' || plot ==''){
                alert('小区名不能为空');
                return false;
            }
            if( place =='请输入您的房屋面积'|| place == ''){
                alert('小区名不能为空');
                return false;
            }
            if( style_id =='请输入小区名称' || style_id ==''){
                alert('小区名不能为空');
                return false;
            }
            var place1 =/^\d{1,7}$/;
            if(place.length == 0){
                alert('请输入您的房屋面积');
                return false;
            }
            if(!place1.test(place)){
                alert('面积有误！');
                return false;
            }
            if(butget == '请输入您的预算'|| butget == ''){
                alert('预算不能为空');
                return false;
            }
            $.ajax({
                type: "POST",
                url: "{:U('Designer/match')}",
                data: {
                    butget:butget,
                    place:place,
                    plot:plot,
                    style_id:style_id,
                    area_id:area_id,
                    remark:remark
                },
                dataType: "json",
                success: function (data) {
                    if (data == 1) {
                        $('#success').modal('toggle');
                    } else if (data == 3) {
                        alert('您已报名');
                    } else if (data == 2) {
                        alert('报名失败，请重新报名');
                    }
                }

            })
            function Trim(str) {
                return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');
            }
        })
        jQuery(document).ready(function ($){
            $('.js-right>li:nth-child(1)').addClass('present');
        })


    </script>

</block>